<script setup>
    import {User, Lock} from '@element-plus/icons-vue'
    import {reactive, ref} from 'vue'
    import { useRouter, useRoute } from 'vue-router';
    import { useUserStore } from '@/store/modules/user';
    import { ElNotification } from 'element-plus';
    import { getTime } from '@/utils/time';
    const router = useRouter()
    const {userLogin} = useUserStore()
    // 收集账号和密码的数据
    const loginFrom = reactive({
        username: 'admin',
        password: '111111'
    })
    const formRef = ref(null)
    // 登录
    const route = useRoute()
    // console.log(route);
   async function login() {
        // 先统一校验，再发请求
       await formRef.value.validate()
       
        loading.value = true
        userLogin(loginFrom).then(res => {
            // console.log(res);
            // 判断登陆的时候，query有没有参数，有就往query参数跳，否则往首页跳
            router.push(route.query.redirect || '/')
            // 登录成功提示信息
            ElNotification({
                type: 'success',
                message: '欢迎回来',
                title: `Hi，${getTime()}好`
            })
            loading.value = false
        }).catch(err => {
            // console.log(err);
            ElNotification({
                type: 'error',
                message: err.message
            })
            loading.value = false
        })
    }

    // 加载
    const loading = ref(false)
    // 自定义规则
    const validatorUsername = (rule, value, callback) => {
        // console.log(callback);
        if (value.length >= 5) {
            callback()
        } else {
            callback(new Error('账号长度至少为五位'))
        }
    }

    const validatorPassword = (rule, value, callback) => {
        if (value.length >= 6 && value.length <= 14) {
            callback()
        } else {
            callback(new Error('密码为6~14位'))
        }
    }
    // 规则对象
    const rules = {
        username: [
            // {required: true, message: '用户名不能为空', trigger: 'blur'},
            // {min: 5, max: 16, message: '用户名为5~16位', trigger: 'blur'},
            {trigger: 'blur', validator: validatorUsername}
        ],
        password: [
            // {required: true, message: '密码不能为空', trigger: 'blur'},
            // {min: 6, max: 14, message: '密码为6~14位', trigger: 'blur'}
            {trigger: 'blur', validator: validatorPassword}
        ],
    }
</script>


<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"> </el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" ref="formRef":model="loginFrom" :rules="rules">
                    <h1>Hello</h1>
                    <h2>欢迎来到硅谷甄选</h2>
                    <el-form-item prop="username">
                        <el-input v-model="loginFrom.username" :prefix-icon="User"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginFrom.password" show-password :prefix-icon="Lock" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" class="login_btn" @click="login" type="primary">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>


<style scoped lang='scss'>
    .login_container{
        width: 100%;
        height: 100vh;
        background: url('@/assets/images/background.jpg') no-repeat left top/cover;
        .login_form{
            position: relative;
            width: 80%;
            top: 30vh;
            background: url('@/assets/images/login_form.png') no-repeat left top/cover;
            padding: 40px;
            h1{
                color: white;
                font-size: 40px;
            }
            h2{
                color: white;
                font-size: 20px;
                margin: 20px 0;
            }
            .login_btn{
                width: 100%;
            }
        }
    }
    
</style>